/*
  学习目标：掌握props传递数据- 函数组件,class组件
  props: 所有标签属性组成的对象
  作用：给组件传递数据
*/
// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';

class Handler extends React.Component {
  render() {
    return (
      <div>
        <h3>我是父组件</h3>
        <div>123</div>
        {/* 1.传递数据：给组件添加属性和值 */}
        <Child name="悟空" age={18} gender={'男'}></Child>
        <Child2 name="马云" age={23}></Child2>
      </div>
    );
  }
}

function Child(props) {
  // 函数组件-通过形参接受props
  console.log('props----->', props);
  return (
    <div>
      <h3>我是子组件</h3>
      <div>{props.name}</div>
      <div>{props.age}</div>
    </div>
  );
}

// 解构方式
function Child2({ name, age }) {
  return (
    <div>
      <h3>我是子组件2</h3>
      <div>{name}</div>
      <div>{age}</div>
    </div>
  );
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
